<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta loop="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/inbox-6.css">
    <link rel="stylesheet" href="./css/swiper-bundle-6.css">
</head>

<body>
    <div class="home">
        <div class="header">
            <div class="warp">
                <a href=""><i class="back"></i></a>
                <h1>新书热卖榜</h1>
                <i class="menu" onclick="salt()"></i>
            </div>
            <ul class="mark">
                <li>
                    <a href="http://m.dangdang.com/">
                        <img src="http://img60.ddimg.cn/upload_img/00459/h5/icon_03_in-1536891748.png" alt="首页">
                    </a>
                </li>
                <li>
                    <a href="http://search.m.dangdang.com/ddcategory.php?t=1725971285">
                        <img src="http://img63.ddimg.cn/upload_img/00528/000/feilei-8-2.png" alt="分类">
                    </a>
                </li>
                <li>
                    <a href="http://z.dangdang.com/?t=1725971286">
                        <img src="http://img62.ddimg.cn/upload_img/00782/h5/ic_buy_normal-1537519625.png" alt="值得买">
                    </a>
                </li>
                <li>
                    <a href="http://cart.m.dangdang.com/cart.php?action=list_cart&t=1725971286">
                        <img src="http://img63.ddimg.cn/upload_img/00528/000/guowuche-8-2.png" alt="购物车">
                    </a>
                </li>
                <li>
                    <a href="http://home.m.dangdang.com/?t=1725971286">
                        <img src="http://img60.ddimg.cn/upload_img/00528/000/wodedangdang---4.png" alt="我的当当">
                    </a>
                </li>
            </ul>
        </div>
        <div class="tabbar">
            <a href="http://z.dangdang.com/guan/index?page_id=793332">
                <img src="https://img63.ddimg.cn/upload_img/00678/zsts/ICON_01_ddsc.jpg" alt="当当书城"></a>
            <a href="http://search.m.dangdang.com/category.php?cid=01.41.00.00.00.00">
                <img src="https://img63.ddimg.cn/upload_img/00678/zsts/ICON_02.jpg" alt="分类"></a>
            <a href="http://cart.m.dangdang.com/cart.php?action=list_cart">
                <img src="https://img62.ddimg.cn/upload_img/00678/zsts/ICON_03.jpg" alt="购物车"></a>
            <a href="http://home.m.dangdang.com/products_history.php?t=1725971469">
                <img src="https://img62.ddimg.cn/upload_img/00678/zsts/ICON_04.jpg" alt="我的足迹"></a>
            <a href="http://z.dangdang.com/?t=1725971286">
                <img src="https://img62.ddimg.cn/upload_img/00678/zsts/ICON_05.jpg" alt="我的订单"></a>
        </div>
        <div class="navbar">
            <div class="search">
                <span>童书</span>
                <input type="text">
            </div>
            <div class="swiper">
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div hash="slide1 slide6" class="swiper-slide">
                            <img src="https://img62.ddimg.cn/2024/8/21/2024082111061811780.jpg" alt="">
                        </div>
                        <div data-hash="slide2" class="swiper-slide">
                            <img src="https://img62.ddimg.cn/2024/8/21/2024082111061849882.jpg" alt="">
                        </div>
                        <div data-hash="slide3" class="swiper-slide">
                            <img src="https://img62.ddimg.cn/2024/8/28/2024082815384991778.jpg" alt="">
                        </div>
                        <div data-hash="slide4" class="swiper-slide">
                            <img src="https://img63.ddimg.cn/topic_img/gys_0014830/ydzh1242_524.jpg" alt="">
                        </div>
                        <div data-hash="slide5" class="swiper-slide">
                            <img src="https://img61.ddimg.cn/topic_img/gys_0014590/yyllpc1242x524.jpg" alt="">
                        </div>
                    </div>
                    <!-- <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div> -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <em class="warp">
                <img src="https://img61.ddimg.cn/2024/8/27/202408271045083374.jpg" alt="">
                <img src="https://img62.ddimg.cn/2024/8/27/202408271045083544.jpg" alt="">
                <img src="https://img62.ddimg.cn/2024/8/6/2024080609525140462.jpg" alt="">
                <img src="https://img62.ddimg.cn/upload_img/00896/ts/88.101115-1700018973.jpg" alt="">
                <img src="https://img61.ddimg.cn/2024/9/3/2024090312051382522.jpg" alt="">
            </em>
            <s></s>
        </div>
        <div class="topbar">
            <div><strong>爆秒叠加满减，到手2折起！</strong>
                <b>00</b><strong>:</strong><b>00</b><strong>:</strong><b>00</b><span>更多<i></i></span>
            </div>
            <ul class="endata warp"></ul>
            <div class="warp">
                <div>图画书<span></span></div>
                <div>爆品秒杀</div>
                <div>科普百科</div>
                <div>9月新书</div>
                <div>儿童文学<span></span></div>
            </div>
            <s></s>
        </div>
        <div class="picbar">
            <img src="https://img62.ddimg.cn/upload_img/00785/ts/720x100tsxs-1646123325.jpg">
            <div class="swiper">
                <div class="swiper mySwiper">
                    <div class="swiper-wrapper">
                        <div hash="slide1 slide6" class="swiper-slide">
                            <img src="https://img59.ddimg.cn/9003470356083469.jpg" alt="">
                        </div>
                        <div data-hash="slide2" class="swiper-slide">
                            <img src="https://img63.ddimg.cn/topic_img/gys_05671/fuermoshu750x220.jpg" alt="">
                        </div>
                        <div data-hash="slide3" class="swiper-slide">
                            <img src="https://img58.ddimg.cn/9003260453020608.jpg" alt="">
                        </div>
                        <div data-hash="slide4" class="swiper-slide">
                            <img src="https://img58.ddimg.cn/9005370357905968.jpg" alt="">
                        </div>
                        <div data-hash="slide5" class="swiper-slide">
                            <img src="https://img61.ddimg.cn/topic_img/gys_0014426/750baoxiaoxiyou220.jpg" alt="">
                        </div>
                    </div>
                    <!-- <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div> -->
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <ul class="indata warp"></ul>
            <ul class="undata warp"></ul>
            <s></s>
        </div>
    </div>
</body>

<script src="./js/reset.js"></script>
<script src="./js/data-6.js"></script>
<script>
    var j = 0
    var mark = document.querySelector(".mark")
    var menu = document.querySelector(".menu")
    function salt() {
        j++
        if (j % 2 == 1) {
            menu.style.backgroundImage = "url(http://z.dangdang.com/static/img/menu-active.c88b7eb.png)"
            mark.style.display = "block"
        } else {
            mark.style.display = "none"
            menu.style.backgroundImage = "url(http://touch.m.dangdang.com/coreimages/menu.png)"
        }
    }

    var endata = document.querySelector(".endata")
    line1.forEach(function (item, index) {
        endata.innerHTML += `
            <li>
                <img src='${item.img_url}'>
                    <span class="loop">${item.name}</span>
                    <span class="price">${item.ddprice}</span>
                    <del class="original_price">${item.original_price}</del>
            </li>
            `
    })
    var indata = document.querySelector(".indata")
    for (i = line1.length - 1; i > -1; i--) {
        indata.innerHTML += `
            <li>
                <img src='${line1[i].img_url}'>
                    <span class="loop">${line1[i].name}</span>
                    <span class="price">${line1[i].ddprice}</span>
                    <span class="tag">限时抢</span>
            </li>
            `
    }
    var undata = document.querySelector(".undata")
    line1.forEach(function (item, index) {
        undata.innerHTML += `
            <li>
                <img src='${item.img_url}'>
                    <span class="loop">${item.name}</span>
                    <span class="price">${item.ddprice}</span>
                    <span class="tag">满减</span>
            </li>
            `
    })

    var picbar = document.querySelector(".picbar")
    var cloned = picbar.cloneNode(true)
    document.body.appendChild(cloned)
</script>
<script src="./js/swiper-bundle-6.js"></script>
<script>
    var swiper = new Swiper(".mySwiper", {
        autoplay: true,
        loop: true,
        autoplay: {
            delay: 1000,
            stopOnLastSlide: false,
            disableOnInteraction: true,
        },
        spaceBetween: 0,
        hashNavigation: false,
        pagination: {
            el: ".swiper-pagination",
            clickable: true,
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev",
        },
    });
</script>

</html>